<template>
	<view style="height: 100vh;overflow: scroll;box-sizing: border-box;padding: 20rpx 0;">
		
		<view class="" style="height: 5%;display: flex;padding:10rpx 40rpx;">
			<view class="alarm-input" style="width: 85%;">
			  <i class="iconfont" 
			     style="">
			    &#xe624;
			  </i>
			  <input 
			    placeholder="搜索我的订单" 
			    type="number" 
			    v-model="phoneNumber" 
			    style=""/>
			</view>
			<view class="" style="margin-left: 20rpx;color: gray;">
				搜索
			</view>
		</view>
		<view class="" style="padding: 0rpx 40rpx 20rpx 40rpx; display: flex; justify-content: space-between;font-size: 26rpx;border-bottom: 1rpx solid #e2e2e2;">
		  <text :style="{ color: tabValue === 0 ? 'black' : 'gray' }" @click="tabValue = 0">全部</text>
		  <text :style="{ color: tabValue === 1 ? 'black' : 'gray' }" @click="tabValue = 1">待付款</text>
		  <text :style="{ color: tabValue === 2 ? 'black' : 'gray' }" @click="tabValue = 2">已完成</text>
		  <text :style="{ color: tabValue === 3 ? 'black' : 'gray' }" @click="tabValue = 3">已取消</text>
		</view>
		<view class="orderList"  style="">
			<view class="order-Item" style="" v-for="i in 15">
				<view class="order-top" style="">
					<text>10082882828282</text>
					<view class="" style="">
						<text>已完成</text>
						<i class="iconfont"
						   style="margin-left: 20rpx;color: #b1b1b1;">
						  &#xe624;
						</i>
					</view>
				</view>
				<view  class="list-item" style="">
					<view  class="item-top" style="">
					    <!-- 图片部分 -->
					    <view class="item-pic" style="">
					        <image style="height: 100%; width: 100%;" src="http://120.234.27.130:9010/uploads/images/ddc.png" mode="aspectFit"></image>
					    </view>
					    
					    <!-- 文字部分 -->
					    <view class="item-content" >
							<view style="margin-top: 10rpx;color: black;font-size: 26rpx;">
							    电动车流量专属智能服务（6个月）
							</view>
							<view style="margin-top: 10rpx;">
							    流量卡号：898625551884554
							</view>
					        <view style="margin-top: 10rpx;">
					            下单时间：2026-05-15
					        </view>
					        <view style="margin-top: 10rpx;color: black;font-size: 26rpx;">
								<text>￥30.00</text>
					            
					        </view>
					    </view>
					</view>
					
				</view>
			</view>
		</view>

		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabValue:0,
			}
		},
		methods: {
		}
	}
</script>

<style lang="scss" scoped>
	.orderList{
		height: 86%;overflow: scroll;box-sizing: border-box;padding: 20rpx;padding-top: 0;
		.order-Item{
			margin: 20rpx 0;border: 1rpx solid #e6e6e6;border-radius: 10rpx;
			box-shadow: 0 2rpx 4rpx rgba(194, 194, 194, 0.1);
			font-size: 23rpx;color: #b4b4b4;
			.order-top{
				view{
					display: flex;
					.iconfont{
					margin: auto 0;
					}
				}
				display: flex;justify-content: space-between;border-bottom: 1rpx solid #dadada;padding: 10rpx;
			}
		}
	}
.list-item{
		background-color: #fff;border-radius: 20rpx;
		padding: 2rpx;
		.item-top{
			display: flex; justify-content: space-between;  padding: 20rpx;
			.item-pic{
				height: 120rpx; width: 40%; display: flex; justify-content: center; align-items: center;
			}
			.item-content{
				width: 60%;
				view{
					 margin: 5rpx;
				}
			}
		}
	}
.alarm-input{
				position: relative;box-sizing: border-box;
				.iconfont{
					position: absolute; left: 2%; top: 40%; 
					transform: translateY(-50%); font-size: 40rpx; color: gray;
				}
				input{
					
					padding-left: 60rpx; height: 50rpx; 
					font-size: 28rpx; border: 1px solid #dedede;
					border-radius: 50rpx;
				}
			}
</style>
